<template>
  <div class="wrap">
    <div class="header">
      <img v-if="userInfo" :src="userInfo.avatar" :onerror="defaultImg" class="avi" alt />
      <div class="ri">
        <h3 v-if="userInfo">{{userInfo.username}}</h3>
        <p @click="setName">编辑</p>
      </div>
    </div>
    <div class="center">
      <div class="item" @click="attention">
        <div>
          <img class="icon" src="../assets/hart.png" alt />
          <p>我的关注</p>
        </div>
        <img src="../assets/right.png" class="right" alt />
      </div>
      <div class="item" @click="setPhone">
        <div>
          <img class="icon" src="../assets/ph.png" alt />
          <p>手机号码</p>
        </div>
        <span>{{phone}}</span>
        <img src="../assets/right.png" class="right" alt />
      </div>
      <div class="item" @click="selectUser">
        <div>
          <img class="icon" src="../assets/dizhi.png" alt />
          <p>地址簿管理</p>
        </div>
        <img src="../assets/right.png" class="right" alt />
      </div>
      <p class="logout" @click="loginout">退出登录</p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.header {
  height: 5rem;
  background: #3fd9c9;
  overflow: hidden;
  display: flex;
  align-items: center;

  .avi {
    width: 2.56rem;
    height: 2.56rem;
    border-radius: 50%;
    display: block;
    margin-left: 0.666667rem;
    margin-right: 1.066667rem;
    border: 2px solid #fff;
  }
  .ri {
    h3 {
      color: #fff;
      font-size: 0.4rem;
      text-align: left;
      margin-bottom: 6px;
    }
    p {
      color: #fff;
      text-align: left;
    }
  }
}
.center {
  background: #fff;
  border-radius: 0.506667rem 0.506667rem 0px 0px;
  margin-top: -0.4rem;
  padding: 1.333333rem 0.613333rem;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1.6rem;
    div {
      display: flex;
    }
    .icon {
      width: 0.6rem;
      height: 0.6rem;
      display: block;
      margin-right: 0.64rem;
    }
    p {
      color: #5b5b5b;
      font-size: 0.4rem;
    }
    .right {
      width: 0.5rem;
      height: 0.5rem;
    }
  }
}
.logout {
  width: 4rem;
  background: #3fd9c9;
  border: none;
  outline: none;
  color: #fff;
  height: 1rem;
  border-radius: 6px;
  margin: 0.4rem auto 0;
  line-height: 1rem;
}
</style>
<script>
import { getById } from "@/utils/interface";
import { Toast, Dialog } from "vant";

export default {
  data() {
    return {
      userInfo: {},
      phone: "",
      defaultImg: 'this.src="' + require("../assets/HEAD.png") + '"',
      name: "",
      avatar: ""
    };
  },
  created() {
    this.getUser();
    document.title = "个人中心";
  },
  methods: {
    // 获取用户信息 localStorage.getItem("wechataccess_user_token")
    getUser() {
      getById().then(
        res => {
          let mobileInfo = null
          if(!res.data.data.avatar){
            mobileInfo  = JSON.parse()
          }
          this.userInfo = res.data.data;
          this.phone =
            this.userInfo.account.substr(0, 3) +
            "****" +
            this.userInfo.account.substr(7);
          localStorage.setItem(
            "customer_userInfo",
            JSON.stringify(res.data.data)
          );
          
        }
      );
    },
    setHeader() {
      this.$router.push("/setHeader");
    },
    setName() {
      this.$router.push("/setHeader");
    },
    attention() {
      this.$router.push("/attention");
    },
    setPhone() {
      this.$router.push("/setPhone");
    },
    mycode() {
      this.$router.push("/myCode");
    },
    selectUser() {
       Toast.fail('此功能即将上线')
      return false
      this.$router.push("/selectUser");
    },
    loginout() {
      Dialog.confirm({
        title: "提示",
        message: "是否退出登陆"
      }).then(() => {
        localStorage.removeItem("customerwx");
        localStorage.removeItem("wechataccess_user_token");
        localStorage.removeItem("mobileInfo");
        this.$router.replace("/login");
      });
    }
  }
};
</script>